<template>
	<view class="details">
		<!-- https://img.aibbyp.com/wechatUser/category1/icon1.png -->
		<view class="" v-if="userInfo.level == 3 && userInfo.id == data.user_id">
			<u-tabs :list="list" :is-scroll="false" active-color="#FD5241" v-model="current"
				@change="changeTabs"></u-tabs>
			<u-badge type="error" :count="data.num" :offset="[6,112]"></u-badge>
		</view>

		<block v-if="current == 0">
			<view class="pl32 pr32">
				<view class="mt24 fb f36 flex_sb flex_ac">
					<text v-if="data.status == 0" class="info">待支付</text>
					<view class="flex_ac primary" v-if="data.status == 1 && userInfo.id == data.user_id">
						<u-icon size="52" name="https://img.aibbyp.com/wechatUser/craftsman/zmz.png"></u-icon>
						<text class="ml12">招募中,请尽快选择师傅</text>
					</view>
					<view class="flex_ac primary" v-if="data.status == 2 && userInfo.id == data.user_id">
						<u-icon size="52" name="https://img.aibbyp.com/wechatUser/craftsman/zhuangtai.png"></u-icon>
						<text class="ml12">招募完成，请尽快沟通服务</text>
					</view>
					<text v-if="data.status == 3" class="error">已取消</text>
					<text v-if="data.joinStatus == -1" class="info">未申请</text>
					<view class="flex_ac info" v-if="data.joinStatus == 0">
						<u-icon size="52" name="https://img.aibbyp.com/wechatUser/craftsman/shengqing.png"></u-icon>
						<text class="ml12">申请中</text>
					</view>
					<text v-if="data.joinStatus == 1" class="primary">已选中</text>
					<view class="flex_ac error" v-if="data.joinStatus == 2 ">
						<u-icon size="52" name="https://img.aibbyp.com/wechatUser/craftsman/jiantou.png"></u-icon>
						<text class="ml12">未选中您，再看看其他的吧</text>
					</view>
					<text v-if="data.joinStatus == 3" class="error">已取消</text>
					<!-- <u-tag v-if="data.status == 1 || data.status == 2 || data.joinStatus == 1 ||data.joinStatus == 2"
						size="default" plain shape="circle" type="error" text='订单进度'
						@click="$wanlshop.to('/pages/craftsman/dingdanjindu?id=' + data.id)">
					</u-tag> -->
				</view>

				<view class="f24 fb mt24 bac mt12">


					<view class="flex_sb mt12">
						<text class="">

							<text class="" v-if="data.worker_type_text">{{data.worker_type_text.name}}:</text>
							<text class="cf64 fb ml24">共招募 {{data.number}} 名</text>
						</text>
						<text class="cf64"> 总价 ￥ <text class="fb f32">{{data.order_price}}</text> </text>
					</view>
					<view class="flex_sb">
						<text class="">

							<text class="" v-if="data.worker_type_text">{{data.worker_type_text.name}}:</text>
							<text class="cf64 fb ml24">已招募 {{data.use_number}} 名</text>
						</text>
						<!-- <text class="cf64"> 单价 ￥ <text class="fb f32">{{data.price}}</text></text> -->
					</view>
					<view class="" v-for="(item1,key3) in data.workers" :key="key3">
						<view class="forbox mt12 wanl-cart-goods u-flex-col " style="align-items: stretch;">
							<view class="flex_ac" v-if="item1.user_worker">
								<image
									@tap="$wanlshop.to('/pages/craftsman/craftsmanHomepage?company=1&id=' + item1.user_id)"
									style="width: 108rpx;height: 108rpx;" class="br100" v-if="item1.user_worker.avatar"
									:src="$wanlshop.oss(item1.user_worker.avatar)" mode=""></image>
								<view class="flex1 ml24 minwidth overflow_1">

									<view class="f32 overflow_1 fb">
										{{item1.user_worker.name}}
										<u-tag class="ml12" v-if="item1.order!=0" :text="`合作${item1.order}次`"
											size="mini" mode="light" type="error" />

									</view>
									<view class="mt8 flex overflow_1">
										<u-tag class="mr12" :text="item1.user_worker.work_time + '年'" size="mini"
											mode="dark" type="warning" />
										<u-tag class="" v-if="item1.company" :text="item1.company" size="mini"
											mode="light" shape="" />

									</view>
								</view>
								<view class=""
									@click="$wanlshop.to('/pages/craftsman/dingdanjindu?id=' + item1.order_id)">
									<text class="cf64"> ￥ <text class="fb f32">{{data.price}}</text></text>
									<view class="info">
										订单详情 <u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>

						</view>

					</view>
					<view class="mt24">
						招募时间 ：<text class="cf64">{{data.start_date_text}} ~ {{data.end_date_text}}</text>
					</view>
					<view class="mt24">
						施工时间 ：
						<text class="cf64">{{data.parent_start_date_text}} ~ {{data.parent_end_date_text}}</text>
					</view>
				</view>
				<view class="">
					<view class="bac mt36">
						<view class="f32 fb">
							工种要求
						</view>
						<view class="f28 mt24">
							<view class="">
								{{data.demand}}
							</view>
						</view>
					</view>
					<view class="bac mt36">

						<view class="f32 fb ">
							服务信息
						</view>
						<view class="flex_ac mt24">
							<u-icon v-if='data.level == 3' name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
								size="60"></u-icon>
							<u-icon v-if='data.level == 2' name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
								size="60"></u-icon>
							<view class="f28 fb ml12">
								{{data.title}}
							</view>
						</view>
						<view class="f28 mt24">
							类型：
							<text class="error fb" v-if="data.type == 1">整装</text>
							<text class="error fb" v-if="data.type == 2">局部改造</text>
							<text class="error fb" v-if="data.type == 3">维修</text>
						</view>
						<view class="f28 mt24">
							装修面积 ：<text class="warning fb">{{data.worker_area}}</text>
						</view>
						<view class="f28 mt24 fb">
							问题图片
						</view>
						<view class="flex flex_warp mt24">
							<block v-for="(i,k) in data.images" :key="k">
								<image class="imgs mt20 mr16" :src="$wanlshop.oss(i)" @click="previewImage(k)" mode="">
								</image>
							</block>
						</view>
						<view class="f28 mt32 fb" v-if='data.video'>
							问题视频
						</view>
						<view class="flex_sb flex_warp mt24" v-if="data.video">
							<video :src="$wanlshop.oss(data.video)" class="videoMp4"
								:class="{'videoMp4HM':userInfo.systemType == '鸿蒙'}"></video>
						</view>
						<view class="f28 mt32 fb">
							服务描述
						</view>
						<view class="f28">
							{{data.describe}}
						</view>
					</view>

					<view class="tjsp mt32" :class="{'tjsp1':shopListData.length<4}">
						<view class="tar cf f24 " @click="$wanlshop.to('/pages/homeRecommend/classify/category')">
							更多商品 <u-icon class="ml8" name="arrow-right" size="22"></u-icon>
						</view>
						<view class="bac mt32">
							<view class="flex mt16 flex-wrap">
								<view class="forBox mr12 mt12 mb12" v-for="(item,key) in shopListData.slice(0,8)"
									:key="key" @click="$wanlshop.to('/pages/product/goods?id='+item.id)">
									<view class="f24" style="position: relative;">
										<image class="img1" :src="$wanlshop.oss(item.image)" mode=""></image>
										<view class="c3d overflow_1 mt12">
											{{item.title}}
										</view>
										<view class="error mt12 f20 flex_sb">
											<view class="">
												￥{{item.price}}
											</view>
										</view>
										<view class="cf f20 pl4 pr4"
											style="position: absolute;right: 0;top: 0;background: #000;opacity: 0.5;border-radius: 0 8rpx 0 8rpx;">
											{{item.distance}}km
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
					<view class="bac mt32">
						<view class="f32 fb">
							订单详情
						</view>
						<view class="flex_ac f24 mt32">
							<view class="c6" style="width: 160rpx;">
								订单编号：
							</view>
							<view class="c3d" @click="copyText(data.order_no)">
								{{data.order_no}} | 复制
							</view>
						</view>
						<view class="flex_ac f24 mt32" v-if="data.trade_no">
							<view class="c6" style="width: 160rpx;">
								支付交易号：
							</view>
							<view class="c3d">
								{{data.trade_no}}
							</view>
						</view>
						<view class="flex_ac f24 mt32">
							<view class="c6" style="width: 160rpx;">
								创建时间：
							</view>
							<view class="c3d">
								{{data.start_date_text}}
							</view>
						</view>
						<view class="flex_ac f24 mt32" v-if="userInfo.id == data.user_id">
							<view class="c6" style="width: 160rpx;">
								付款时间：
							</view>
							<view class="c3d">
								{{data.paymenttime_text}}
							</view>
						</view>
					</view>


				</view>
			</view>
			<!-- 0=待选择,1=已选中,2=未选中,3=已取消,4=已邀请,5=已拒绝 -->
			<view class="lxsf flex_y_center flex_x_center" v-if="data.status == 1 && userInfo.id == data.user_id">
				<view class="c3d ml20 f28 qxdd" @click="quxiao(data)">
					取消招募
				</view>
			</view>
			<view class="lxsf flex_y_center flex_x_center" v-if="data.joinStatus == -1 && data.status == 1">
				<view class="c3d ml20 f28 qxdd" @click="shengqingjiaru(data)">
					申请加入
				</view>
			</view>
			<view class="lxsf flex_y_center flex_x_center" v-if="data.joinStatus == 0">
				<view class="c3d ml20 f28 qxdd" @click="gongjiangquxiao(data)">
					取消加入
				</view>
			</view>
			<view class="lxsf flex_y_center flex_x_center"
				v-if="option.me == 'true' && data.status == 0 &&  userInfo.id == data.user_id">
				<view class="c3d ml20 f28 qxdd" @click="quxiaojiedan(data)">
					取消订单
				</view>
			</view>
			<view class="lxsf flex_y_center flex_x_center"
				v-if="option.type == 'chat' && userInfo.level == 2 && data.joinStatus == 4 && data.status== 1">
				<u-button type="" plain @click="jieshou(order,0)">
					拒绝
				</u-button>
				<u-button class="flex1 ml24" type="primary" @click="jieshou(order,1)">
					同意
				</u-button>
			</view>
			<view class="lxsf flex_y_center flex_x_center " v-if="option.me == 'null' && data.status== 1">
				<view class="c3d ml20 f28 qxdd" @click="lijiqiangdan(data)">
					立即抢单
				</view>
			</view>
		</block>
		<block v-if="current == 1">

			<view class="current1Box">
				<view>
					<view class="f28 fb mt24">
						我的选择（
						<text class="primary">{{data.use_number}}</text>
						<text v-if='data.worker_type_text'>/{{data.number}}名{{data.worker_type_text.name}}）</text>
					</view>
					<view class="mt32">
						<view class="flex">
							<view class="flex_ac" v-for="(item1,index) in navList1" :key="index">
								<!-- 公司工匠 -->
								<u-button v-if="index == 0" size="mini"
									:type="tabCurrentIndex == index ? 'primary':'info'"
									:plain="tabCurrentIndex !== index"
									@click="tabCurrentIndex = index">{{item1.text_show}} ({{data.company_all}})
									<u-badge type="error" :count="data.company_num" :offset="[6,142]"
										:is-center="true"></u-badge>
								</u-button>

								<!-- 其他工匠 -->
								<u-button v-if="index == 1" size="mini" class="ml24"
									:type="tabCurrentIndex == index ? 'primary':'info'"
									:plain="tabCurrentIndex !== index"
									@click="tabCurrentIndex = index">{{item1.text_show}} ({{data.worker_all}})
									<u-badge type="error" :count="data.worker_num" :offset="[6,142]"
										:is-center="true"></u-badge>
								</u-button>


							</view>
						</view>

						<swiper :current="tabCurrentIndex" class="mt24" style="height: calc(100vh - 180rpx)"
							duration="300" @change="changeTab">
							<swiper-item class="tab-content" v-for="(tag, key1) in navList" :key="key1">
								<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
									<!-- 空白页 -->
									<block v-if="key1 == 0">
										<!-- 订单列表 -->
										<view v-for="(order, okey) in tag.list" :key="okey"
											v-if="tag.list && tag.list.length > 0">
											<view class="flex_ac checkboxBox bac mb20">
												<view class="flex_ac flex1">
													<image class="img" :src="$wanlshop.oss(order.avatar)"
														@click.stop="$wanlshop.to('/pages/craftsman/craftsmanHomepage?id='+ order.user_id)"
														mode=""></image>
													<view class="ml24">
														<view class="flex_ac">
															<view class="f24">
																{{order.name}}
															</view>
															<u-tag class="ml24" size="mini" plain
																v-if="order.together_number!=0"
																:text="`合作${order.together_number}次`"></u-tag>
														</view>
														<view class="mt8">
															<u-tag type="warning" class="" mode='dark' size="mini"
																:text="`${order.work_time}年`"></u-tag>
															<u-tag v-if="order.company && order.company.name"
																type="primary" class="ml24" mode='plain' size="mini"
																:text="`${order.company.name}`"></u-tag>
														</view>
													</view>
												</view>
												<!-- 选择 @click="xzjj(order,1)" -->
												<view v-if="order.join_status == 0 && !order.myjoin_status"
													class="cf f24 br24 ml12" @click="qz(order, okey,0)"
													style="background: #3583F0;padding: 14rpx 40rpx;">
													选择
												</view>
												<view v-if="order.join_status == 0 && order.myjoin_status"
													class="cf f24 br24 ml12" @click="qz(order, okey,0)"
													style="background: #fff;padding: 14rpx 15rpx;color:#3583F0;border:#3583F0 1rpx solid;">
													取消选择
												</view>

												<view v-if="order.join_status == 1" class="cf f24 br24 ml12"
													style="background: #3583F0;padding: 14rpx 40rpx;">
													已选中
												</view>
												<view v-if="order.join_status == -1" class="cf f24 br24"
													@click="yqgj(order)"
													style="background: #FD5241;padding: 14rpx 40rpx;">
													邀请
												</view>
												<view v-if="order.join_status == 4 && userInfo.level == 3"
													class="c3d f24 br24" @click="yqgj(order)"
													style="background: #FFD1CC;padding: 14rpx 40rpx;">
													待接受
												</view>
											</view>
										</view>
										<wanl-empty v-else text="暂无更多信息" />
									</block>
									<block v-if="key1 == 1">
										<!-- 订单列表 -->
										<view v-for="(order, okey) in tag.list" :key="okey"
											v-if="tag.list && tag.list.length > 0">
											<view class="flex_ac checkboxBox bac mb20">
												<view class="flex_ac flex1" v-if="order.user_worker">
													<image class="img" :src="$wanlshop.oss(order.user_worker.avatar)"
														@click.stop="$wanlshop.to('/pages/craftsman/craftsmanHomepage?id='+ order.user_id)"
														mode=""></image>
													<view class="ml24">
														<view class="flex_ac">
															<view class="f24">
																{{order.user_worker.name}}
															</view>
															<u-tag class="ml24" size="mini" plain
																v-if="order.together_number!=0"
																:text="`合作${order.together_number}次`"></u-tag>
														</view>
														<view class="mt8">
															<u-tag type="warning" class="" mode='dark' size="mini"
																:text="`${order.user_worker.work_time}年`"></u-tag>
															<u-tag v-if="order.company && order.company.name"
																type="primary" class="ml24" mode='plain' size="mini"
																:text="`${order.company.name}`"></u-tag>
														</view>
													</view>
												</view>
												<view v-if="order.status == 0 && !order.myjoin_status"
													class="cf f24 br24 ml12" @click="qz(order, okey,0)"
													style="background: #3583F0;padding: 14rpx 40rpx;">
													选择
												</view>
												<view v-if="order.status == 0 && order.myjoin_status"
													class="cf f24 br24 ml12" @click="qz(order, okey,0)"
													style="background: #fff;padding: 14rpx 15rpx;color:#3583F0;border:#3583F0 1rpx solid;">
													取消选择
												</view>

												<view v-if="order.status == 1" class="cf f24 br24 ml12"
													style="background: #3583F0;padding: 14rpx 40rpx;">
													已选中
												</view>
												<view v-if="order.status == 2" class="cf f24 br24 ml12"
													style="background: #FFD1CC;padding: 14rpx 40rpx;">
													未选中
												</view>
												<view v-if="order.status == 3" class="cf f24 br24 ml12"
													style="background: #FFD1CC;padding: 14rpx 40rpx;">
													已取消
												</view>
											</view>
										</view>
										<wanl-empty v-else text="暂无更多信息" />
									</block>
									<view class="edgeInsetBottom"></view>
								</scroll-view>
							</swiper-item>
						</swiper>

					</view>
				</view>

				<view class="qdxz" v-if="tabCurrentIndex == 0 && navList[0].list.length > 0 && hasJoinStatusZero">
					<view class="btn" @click="xzjj">
						确定选择
					</view>
				</view>
				<view class="qdxz" v-if="tabCurrentIndex == 1 && navList[1].list.length > 0 && hasJoinStatusZero1">
					<view class="btn" @click="xzjj">
						确定选择
					</view>
				</view>


			</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: ''
				},
				tabCurrentIndex: 0,
				navList1: [{
						state: 0,
						count: 0,
						text: '公司工匠',
						text_show: '公司工匠',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						count: 0,
						text: '其他工匠',
						text_show: '其他工匠',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
				],
				navList: [{
						state: 0,
						count: 0,
						text: '公司工匠',
						text_show: '公司工匠',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						count: 0,
						text: '其他工匠',
						text_show: '其他工匠',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
				],
				shopListData: [],
				count: 0,
				checkedData: [],
				data1: [],
				userInfo: uni.getStorageSync('wanlshop:user'),
				current: 0,
				list: [{
						name: '招募详情'
					},
					{
						name: '申请工匠'
					},
				],
				data: {},
				option: {
					me: null,
					id: '',
				},
			}
		},
		onLoad(option) {
			this.getlists()
			this.option = option
			this.recruitGetData()

		},
		computed: {
			hasJoinStatusZero() {
				const list = this.navList[0]?.list || [];
				return list.some(item => item.join_status === 0);
			},
			hasJoinStatusZero1() {
				const list = this.navList[1]?.list || [];
				return list.some(item => item.status === 0);
			}
		},
		methods: {
			qz(order, key, type) {

				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				if (!navItem.list[key].myjoin_status) {
					this.$set(navItem.list[key], 'myjoin_status', order.user_id);
				} else {
					this.$set(navItem.list[key], 'myjoin_status', null);
				}

			},
			jieshou(data, type) {
				if (type == 0) {
					this.$api.post({
						url: '/worker/recruit/refuseInvite',
						data: {
							id: this.option.id
						},
						success: res => {
							this.recruitGetData()
							this.$wanlshop.msg('已拒绝')
						}
					})
				}
				if (type == 1) {
					this.$api.post({
						url: '/worker/recruit/applyJoin',
						data: {
							id: this.option.id
						},
						success: res => {
							this.recruitGetData()
							this.$wanlshop.msg('已申请')
						}
					})
				}
			},
			xzjj(data, type) {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let user_ids = []

				this.$api.post({
					url: '/worker/recruit/selectedWorker',
					data: {
						id: this.option.id,
						user_ids: navItem.list.map(a => a.myjoin_status).filter(Boolean),
					},

					success: res => {
						this.recruitGetData()
						this.$wanlshop.to('/pages/craftsman/company/fabuchenggong?type=zm&id=' + this.data.id)
					}
				})
			},
			yqgj(data) {
				this.$api.post({
					url: '/worker/recruit/inviteWorker',
					data: {
						id: this.option.id,
						user_id: data.user_id,

					},
					success: res => {
						this.recruitGetData()
						this.loadData()
						this.$wanlshop.msg('已邀请')
					}
				})
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;

				navItem.loadingType = 'loading';
				// 获取列表
				this.$api.get({
					url: '/worker/recruit/getMyCompanyRecruitJoin',
					data: {
						id: this.option.id,
					},
					success: res => {
						console.log(res.list.data);
						navItem.list = res.list.data
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},

			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				if (this.tabCurrentIndex == 0) {

					this.loadData()
				} else {

					this.gongjiangshengqinglist()
				}
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						this.$wanlshop.msg('已复制')
					},
					fail: (err) => {
						this.$wanlshop.msg('复制失败')
					}
				});
			},
			getlists() {
				this.$api.get({
					url: '/wanlshop/product/lists',
					data: {
						sort: 'distance',
						filter: {
							"is_send": "1"
						},
						op: {
							"is_send": "="
						},
						page: '1',
						limit: '8',
					},
					success: res => {
						this.shopListData = res.data
					}
				})
			},
			gongjiangshengqinglist() {
				this.$api.get({
					url: '/worker/recruit/getRecruitJoin?id=' + this.option.id,
					success: res => {
						if (res[0] && res[0].user_worker) {
							this.list[1].name = '申请工匠  (' + this.data.all + ')'
						}
						let index = this.tabCurrentIndex;
						let navItem = this.navList[index];
						let state = navItem.state;
						navItem.list = res
					}
				})
			},
			gongjiangquxiao(data) {
				console.log(data);
				this.$api.post({
					url: '/worker/recruit/cancelJoinRecruit',
					data: {
						id: data.id
					},
					success: res => {
						this.$wanlshop.msg('操作成功')
						this.recruitGetData()
					}
				})
			},
			shengqingjiaru(data, index) {
				console.log(data);
				this.$api.post({
					url: '/worker/recruit/applyJoin',
					data: {
						id: data.id
					},
					success: res => {
						this.$wanlshop.msg('操作成功')
						this.recruitGetData()
					}
				})
			},

			quxiao(data, index) {
				this.$api.post({
					url: '/worker/recruit/cancelRecruit',
					data: {
						id: data.id
					},

				}).then(res => {
					this.recruitGetData()
					this.$wanlshop.msg('操作成功')
				})
			},
			checkboxGroupChange() {},
			quxiaojiedan(data, index) { //取消订单
				this.$api.post({
					url: '/worker/task/cancelOrder',
					data: {
						order_id: data.id
					},
					success: res => {
						this.$wanlshop.msg('操作成功')
						this.meGetData(this.option.id)
					}
				})
			},
			lijiqiangdan(item, index) {
				this.$api.post({
					url: '/worker/task/grabOrder',
					data: {
						id: item.id
					},
					loadingTip: '抢单中...',
					success: res => {
						this.$wanlshop.to('/pages/craftsman/qiangdanchenggong?id=' + res.order_id)
						// this.$wanlshop.msg('抢单成功')
					},
					fail: error => {

					}
				})
			},

			changeTabs() {
				console.log(1);
			},
			getData(id) {
				this.$api.post({
					url: '/worker/task/taskDetail',
					data: {
						id: id
					},
					loadingTip: '加载中...',

				}).then(res => {
					this.data = res
				})
			},
			recruitGetData(id) {
				this.$api.post({
					url: '/worker/recruit/recruitDetail',
					data: {
						id: this.option.id
					},
				}).then(res => {
					this.data = res
					this.gongjiangshengqinglist()
					this.loadData()
				})
			},
			meGetData(id) {
				this.$api.post({
					url: '/worker/task/orderDetail',
					data: {
						order_id: id
					},
				}).then(res => {
					this.data = res
				})
			},
			previewImage(k) {
				let imgArr = []
				uni.previewImage({
					urls: imgArr,
					current: 1,
					indicator: 'number'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tjsp {
		height: 704rpx;
		width: 686rpx;
		background-image: url('https://img.aibbyp.com/wechatUser/ass.png');
		background-size: 100% 100%;
		border-radius: 12rpx;
		padding: 22rpx 26rpx;

		.forBox:nth-child(4n) {
			margin-right: 0;
		}

		.forBox {
			width: 23%;

			.img1 {
				width: 100%;
				height: 130rpx;
				border-radius: 12rpx !important;
			}
		}
	}

	.tjsp1 {
		height: 424rpx;
		background-size: 100% 180%;
	}

	.qdxz {
		width: 750rpx;
		height: 166rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx 74rpx 0;

		.btn {
			width: 632rpx;
			height: 80rpx;
			background: #3583F0;
			text-align: center;
			line-height: 80rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	}

	.details {
		line-height: normal;
		background-repeat: no-repeat;
		width: 100%;
		overflow: hidden;
		// background-image: url('https://img.aibbyp.com/wechatUser/category1/gjrzbjc.png');
		background-size: 100% 100%;
		padding-bottom: 160rpx;

		.current1Box {
			padding: 20rpx 30rpx;
			width: 100%;


			::v-deep .u-checkbox-group {
				width: 100%;
			}

			::v-deep .u-checkbox {
				width: 100% !important;
				width: 100%;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-top: 20rpx;
				flex-direction: row-reverse;
				padding-right: 40rpx;

				.u-checkbox__label {
					width: 100%;
				}
			}

			.checkboxBox {
				width: 100%;
			}
		}

		.bac {


			.img {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
			}

		}

		.shifulist {
			background: #fff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 30rpx;

			.forBox {
				display: flex;
				align-items: center;
				padding: 28rpx 24rpx;
				border-bottom: 1rpx #eee solid;

				.imgbj {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
			}
		}

		.bjtop {
			font-size: 28rpx;
			color: #FF6400;
			padding: 18rpx 34rpx;
			background: #FFEFE4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.imglt {
			width: 48rpx;
			height: 48rpx;
		}

		.lxsf {
			background: #fff;
			height: 140rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 2;
			padding: 20rpx;
		}

		.qxdd {
			background: #FD5241;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
			width: 632rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.videoMp4 {
			width: 100%;

		}

		.bac {
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx 32rpx;
		}

		.icons {
			width: 56rpx;
			height: 56rpx;
		}

		.dh {
			width: 32rpx;
			height: 32rpx;
		}

		.imgs {
			height: 180rpx;
			width: 180rpx;
			border-radius: 12rpx;
		}
	}
</style>